<head>
  <meta charset="utf-8">
  <script src="https://js.braintreegateway.com/web/dropin/1.10.0/js/dropin.min.js"></script>
  
	<!-- Load PayPal's checkout.js Library. -->
	<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>

	<!-- Load the client component. -->
	<script src="https://js.braintreegateway.com/web/3.33.0/js/client.min.js"></script>

	<!-- Load the PayPal Checkout component. -->
	<script src="https://js.braintreegateway.com/web/3.33.0/js/paypal-checkout.min.js"></script>
	
</head>
<body>
	<div id="paypal-button"></div>
  <script>
  var CLIENT_AUTHORIZATION = 'sandbox_mrbpnzkr_ryzvj274ysrcb5pq';
  var myDeviceData;
  
   // Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {

  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }
  
  /* braintree.dataCollector.create({
    client: clientInstance,
    paypal: true
  }, function (err, dataCollectorInstance) {
    if (err) {
      // Handle error
      return;
    }
	
    // At this point, you should access the dataCollectorInstance.deviceData value and provide it
    // to your server, e.g. by injecting it into your form as a hidden input.
    myDeviceData = dataCollectorInstance.deviceData;
	
	console.log("myDeviceData=" + myDeviceData);
  });*/

  // Create a PayPal Checkout component.
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (paypalCheckoutErr, paypalCheckoutInstance) {

    // Stop if there was a problem creating PayPal Checkout.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (paypalCheckoutErr) {
      console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
      return;
    }

    // Set up PayPal with the checkout.js library
    paypal.Button.render({
      env: 'sandbox', // or 'sandbox'

      payment: function () {
        return paypalCheckoutInstance.createPayment({
          flow: 'vault',
          billingAgreementDescription: 'Your agreement description',
          enableShippingAddress: true,
          shippingAddressEditable: false,
          shippingAddressOverride: {
            recipientName: 'Scruff McGruff',
            line1: '1234 Main St.',
            line2: 'Unit 1',
            city: 'Chicago',
            countryCode: 'US',
            postalCode: '60652',
            state: 'IL',
            phone: '123.456.7890'
          }
        });
      },

      onAuthorize: function (data, actions) {
	  
		/* return actions.payment.get(data, function(err, payload) { 
			debugger;
			console.log(payload); 
		});*/
		
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
			console.log("payload.nonce=" + payload.nonce);
          // Submit `payload.nonce` to your server.
        });
      },

      onCancel: function (data) {
        console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
      },

      onError: function (err) {
        console.error('checkout.js error', err);
      }
    }, '#paypal-button').then(function () {
      // The PayPal button will be rendered in an html element with the id
      // `paypal-button`. This function will be called when the PayPal button
      // is set up and ready to be used.
    });

  });

});
  </script>
</body>